<template >
  <div class="home">
    <el-container>
      <el-header>
        <Header/>
    </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px' ">
            <Asider/>
        </el-aside>
        <el-main >
          <!-- 面包屑 -->
          <Breadcrumb/>
            <!-- <Mymain />  这里显示路由组件  坑死人-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Asider from './components/Asider.vue';
import Header from './components/Header.vue';
import { ref,provide } from 'vue'
//导入面包屑组件
import Breadcrumb from '@/components/Breadcrumb.vue'

//在父组件中定义一个控制是否收起菜单的变量
const isCollapse = ref(false)
//使用注入
provide('isCollapse',isCollapse)

</script>


<style lang="less" scoped>
.home {
    position: relative;
    height: 112%;
    width: 100%;
    //铺满屏幕
    //overflow: overflow;
    transform: translateX(-30px);
    //去掉右边和下面的滚动条
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    //去掉右边的滚动条
    :deep(el-main){
      //解决数据太多时，滚动条不显示的问题
      height: calc(100vh - 70px);
      //去掉右边和下面的滚动条
      ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    }

}


</style>